<template>
  <div class="flex h-[100%]" style="flex-direction: column">
    <!-- 业绩目标 -->
    <div class="overflow-y-auto overflow-x-hidden rounded-[8px] bg-color" @click="openSort">
      <div class="performance-item" v-for="(item, key) in performance" :key="key">
        <div></div>
        <div class="flex">
          <div class="flex-1 font-bold text-[14px] text-color">
            【{{ item.target_type == 1 ? "团队" : "个人" }}】
            <span v-if="item.target_type == 1">【{{ item.name }}】</span>
            {{ item.indicator_type }}
            <span v-if="item.indicator_type != '订单量'"> /{{ item.currency }} </span>
          </div>
        </div>
        <div class="text-[12px] text-[#999] mt-[4px] w-[284px]">
          {{ item.start_date }}-{{ item.end_date }}（距离目标日还有<span :class="`text-[${item.textColor}] font-bold mx-[2px]`">{{ item.daysApart }}</span
          >天）
        </div>
        <div class="flex items-center min-w-[284px] mt-[6px]">
          <div class="font-bold flex-1">
            <div class="text-[14px] mb-[4px]">
              <label class="text-[#999] mr-[16px]">目标值</label>
              <span class="font-family_65 text-color">{{ item.target?.toLocaleString("en-US") }}</span>
            </div>
            <div class="text-[14px] mb-[4px]">
              <label class="text-[#999] mr-[16px]">完成值</label>
              <span :class="` text-[${item.textColor}] font-family_65`">{{ item.finish?.toLocaleString("en-US") }}</span>
            </div>

            <div class="text-[14px] mb-[4px]">
              <label class="text-[#999] mr-[16px]">本期应完成</label>
              <span class="font-family_65">{{ item.cur_finish?.toLocaleString("en-US") }}</span>
            </div>
            <div class="text-[14px]">
              <label class="text-[#999] mr-[16px]">本期达成率</label>
              <span :class="`text-[${item.textColor}] font-family_65`">{{ item.cur_finish_rate }}%</span>
            </div>
          </div>
          <div class="flex items-center relative">
            <div class="relative w-[70px] h-[70px]">
              <div :id="`myChart${key}`" class="w-[70px] h-[70px]"></div>
              <div v-for="i in 4" :key="i" :class="`chart-link link_${i}`"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 商品目标完成情况 -->
      <div class="goods-target" v-for="(item, key) in goodTargetList" :key="key" @click.stop>
        <div class="font-bold"><span class="goods-target_module">商品</span> [{{ item.goods_target_config.target_rule_text }}] [{{
                    item.goods_target_config.dimensionality_text
                  }}] {{ item.goods_target_config.target_type_text }}</div>
        <div class="py-1 text-[#999] text-[12px]"> {{ item.goods_target_config.month_start }}至
                  {{ item.goods_target_config.month_end }}
                  距离目标日还剩(<span :class="`text-[${item.textColor}] font-bold mx-[2px]`">{{
                    item.goods_target_config.remaining_days
                  }}</span
                  >)天</div>
        <div class="flex items-center mt-[6px]">
          <div class="text-[14px] mb-[4px] mr-6">
            <label class="text-[#999] mr-[16px]">完成值：</label>
            <span class="text-[#333] font-family_65">{{ item.finish_value }}</span>
          </div>
          <div class="text-[14px] mb-[4px]">
            <label class="text-[#999] mr-[16px]">目标值：</label>
            <span class="text-[#333] font-family_65">{{ item.target_value }}</span>
          </div>
        </div>
        <div class="pt-2"><el-progress :color="item.textColor" :percentage="computePercentage(item)" /></div>
      </div>
    </div>
    <!-- 个人信息 -->
    <div class="flex-1">
      <div class="relative overflow-hidden px-[4px] pb-[6px] my-[8px] rounded-[8px] min-h-[140px] bg-color">
        <div class="absolute top-0 left-[4px] right-[4px] bottom-[6px]">
          <!-- <img src="./imgs/bg.png" alt="" class="w-[100%] h-[100%]" /> -->
          <img :src="userBg[mode]" alt="" class="w-[100%] h-[100%]" />
          <img src="./imgs/bg-hand.png" class="bg-hand" />
        </div>

        <div class="relative flex align-center py-[24px] px-[12px]">
          <div class="">
            <div class="text-[24px] leading-[35px] mt-[6px] hello-title font-[500]">
              <p>Hello,{{ state.user.en_name }}~</p>
              <p></p>
            </div>
            <div class="mt-[9px] text-[16px] leading-[25px] text-[18px] DFWaWaSC">
              <div class="tenant-name">
                <p v-if="state.other.time">
                  这是您在{{ state.other.tenant_name }}的第<span class="px-[6px] text-[18px]">{{ state.other.time }}</span
                  ><span v-if="state.other.time">天，</span>加油，我看好你哦！
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="text-center rounded-[8px] bg-color">
        <!-- 用户信息 -->

        <div class="flex items-center p-[16px]">
          <img :src="state.user.picture" alt="头像" class="w-[88px] h-[88px] rounded-[50%] overflow-hidden object-cover object-center mr-[8px]" />

          <div class="text-left flex-1" style="line-height: 24px">
            <p class="text-[18px] text-[#3487FF] leading-[24px] font-[500]">
              {{ state.user.en_name }}
            </p>

            <p class="text-[14px] font-[500] text-color">{{ state.user?.office }}</p>
            <el-text line-clamp="2" class="text-color">
              {{ state.departments?.map((v) => v.name)?.join("-") }}
            </el-text>

            <div class="text-[12px] text-[#999] leading-[16px] cursor-pointer flex items-center" @click="handleEditPwd" v-if="isPermission(['/permission/index/editPassword'])">
              <i class="main-iconfont icon-eidt mr-[2px]"></i>
              <span class="cursor-pointer" >修改密码</span>
            </div>
          </div>
        </div>
        <!-- 角色 -->
        <div>
          <div class="mx-[16px] mb-[16px]" style="border: 1px dashed var(--el-border-color)"></div>
          <div class="my-[8px] flex justify-center">
            <template v-for="(item, k) in state.roles" :key="item.label">
              <span
                class="text-[12px] text-[#666] px-[6px] py-[2px] border-[var(--el-border-color)] border-[1px] rounded-[12px] mr-[4px] w-[80px] whitespace-nowrap overflow-hidden text-ellipsis"
                v-if="k < 3"
              >
                {{ item.name }}
              </span>
            </template>

            <el-popover placement="right-end" :width="380" trigger="hover" :content="state.roles?.map((v) => v.name)?.join()" v-if="state.roles.length > 3">
              <div class="">
                <el-tag v-for="item in state.roles" :key="item.name" effect="light" round class="m-[4px]">
                  {{ item.name }}
                </el-tag>
              </div>
              <template #reference>
                <span class="text-[12px] text-[#3487FF] px-[6px] py-[2px] border-[var(--el-border-color)] border-[1px] rounded-[12px] mr-[4px] w-[80px] cursor-pointer">更多...</span>
              </template>
            </el-popover>
          </div>

          <div class="text-[12px] leading-[17px] text-[#9da1ad]">需要其他权限或角色，请飞书提权限审批申请！</div>
        </div>
        <div class="shadow-[0_-1px_0_0_var(--el-border-color)] py-[12px] text-[14px] leading-[20px] cursor-pointer mt-[16px] text-color" @click="handleLogout">退出账号</div>
      </div>
    </div>
  </div>
  <!-- 临时方案 WebSocket 优化完修改 -->
  <el-dialog v-model="dialogVisible" width="800" :show-close="false" class="my-dialog">
    <template #header>
      <div class="my-dialog-header flex items-center px-[16px]">
        <div class="flex-1">
          <img src="./imgs/xingzheng.png" class="w-[123px] h-[28px]" />
        </div>
        <img src="./imgs/close.png" class="w-[90px] h-[46px]" />
      </div>
    </template>

    <div>
      <div class="performance-item flex h-[137px]" v-for="(item, key) in performance" :key="key">
        <div class="w-[100px] h-[100px]">
          <img src="./imgs/tuandui.png" class="w-[84px]" v-if="item.target_type == 1" />
          <img src="./imgs/geren.png" class="w-[84px]" v-else />
        </div>

        <div class="flex-1">
          <div class="font-bold text-[14px] text-color">
            【{{ item.target_type == 1 ? "团队" : "个人" }}】
            <span v-if="item.target_type == 1">【{{ item.name }}】</span>
            {{ item.indicator_type }}
            <span v-if="item.indicator_type != '订单量'"> /{{ item.currency }} </span>
          </div>

          <div class="text-[12px] text-[#999] mt-[4px] w-[284px]">
            {{ item.start_date }}-{{ item.end_date }}（距离目标日还有<span :class="`text-[${item.textColor}] font-bold mx-[2px]`">{{ item.daysApart }}</span
            >天）
          </div>
          <div class="font-bold flex text-[14px] mt-[8px]">
            <div class="w-[140px]">
              <label class="text-[#999] mr-[16px]">目标值</label>
              <span class="font-family_65 text-color">{{ item.target?.toLocaleString("en-US") }}</span>
            </div>
            <div class="ml-[48px]">
              <label class="text-[#999] mr-[16px]">本期应完成</label>
              <span class="text-[#333] font-family_65">{{ item.cur_finish?.toLocaleString("en-US") }}</span>
            </div>
          </div>

          <div class="font-bold flex text-[14px] mt-[8px]">
            <div class="w-[140px]">
              <label class="text-[#999] mr-[16px]">完成值</label>
              <span :class="`text-[${item.textColor}] font-family_65`">{{ item.finish?.toLocaleString("en-US") }}</span>
            </div>
            <div class="ml-[48px]">
              <label class="text-[#999] mr-[16px]">本期达成率</label>
              <span :class="`text-[${item.textColor}] font-family_65`">{{ item.cur_finish_rate }}%</span>
            </div>
          </div>
        </div>
        <div class="flex items-center relative h-[100%]">
          <div class="relative w-[70px] h-[70px]">
            <div :id="`myChart${key}d`" class="w-[70px] h-[70px]"></div>
            <div v-for="i in 4" :key="i" :class="`chart-link link_${i}`"></div>
          </div>
        </div>
      </div>
      <!-- <div class="text-center">
        <el-link type="primary" :underline="false" @click="onPush">
          查看业绩排行<el-icon><Histogram /></el-icon>
        </el-link>
      </div> -->
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"> 关闭 </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 临时方案 指标排序 -->
  <el-dialog v-model="sortVisible" width="1000" title="业绩指标" :show-close="false" :close="closeSort">
    <div class="flex sort-box">
      <div class="h-[80vh] overflow-y-auto w-[220px] left">
        <el-radio-group v-model="sortForm.query_type" style="margin-bottom: 8px" @change="queryTypeChange">
          <el-radio-button value="all" label="all">全部</el-radio-button>
          <el-radio-button value="department" label="department">部门</el-radio-button>
        </el-radio-group>
        <el-tree
          style="max-width: 200px"
          :data="departmentData"
          ref="departmentRef"
          :props="defaultProps"
          @node-click="handleNodeClick"
          highlight-current
          class="department_tree"
          node-key="id"
          :default-expanded-keys="[2]"
          :expand-on-click-node="false"
        >
          <template #default="{ node }">
            <span class="custom_tree_node">
              <span class="lable">{{ node.label }}</span>
            </span>
          </template>
        </el-tree>
      </div>
      <div v-loading="sortLoading">
        <div class="pr-[50px] overflow-auto" style="height: 80vh">
          <VueDraggable v-model="sortPerformance" @update="sortChange">
            <div v-for="(item, key) in sortPerformance" :key="key" class="relative">
              <div class="index-key">
                {{ key + 1 }}
              </div>

              <div class="performance-item flex h-[137px] ml-[35px]">
                <div class="w-[100px] h-[100px]">
                  <img src="./imgs/tuandui.png" class="w-[84px]" v-if="item.target_type == 1" />
                  <img src="./imgs/geren.png" class="w-[84px]" v-else />
                </div>

                <div class="flex-1">
                  <div class="font-bold text-[14px] text-color">
                    【{{ item.target_type == 1 ? "团队" : "个人" }}】
                    <span v-if="item.target_type == 1">【{{ item.name }}】</span>
                    {{ item.indicator_type }}
                    <span v-if="item.indicator_type != '订单量'"> /{{ item.currency }} </span>
                  </div>

                  <div class="text-[12px] text-[#999] mt-[4px] w-[284px]">
                    {{ item.start_date }}-{{ item.end_date }}（距离目标日还有<span :class="`text-[${item.textColor}] font-bold mx-[2px]`">{{ item.daysApart }}</span
                    >天）
                  </div>
                  <div class="font-bold flex text-[14px] mt-[8px]">
                    <div class="w-[140px]">
                      <label class="text-[#999] mr-[16px]">目标值</label>
                      <span class="font-family_65 text-color">{{ item.target?.toLocaleString("en-US") }}</span>
                    </div>
                    <div class="ml-[48px]">
                      <label class="text-[#999] mr-[16px]">本期应完成</label>
                      <span class="text-[#333] font-family_65">{{ item.cur_finish?.toLocaleString("en-US") }}</span>
                    </div>
                  </div>

                  <div class="font-bold flex text-[14px] mt-[8px]">
                    <div class="w-[140px]">
                      <label class="text-[#999] mr-[16px]">完成值</label>
                      <span :class="`text-[${item.textColor}] font-family_65`">{{ item.finish?.toLocaleString("en-US") }}</span>
                    </div>
                    <div class="ml-[48px]">
                      <label class="text-[#999] mr-[16px]">本期达成率</label>
                      <span :class="`text-[${item.textColor}] font-family_65`">{{ item.cur_finish_rate }}%</span>
                    </div>
                  </div>
                </div>
                <div class="flex items-center relative h-[100%]">
                  <div class="relative w-[70px] h-[70px]">
                    <div :id="`myChart${key}sd`" class="w-[70px] h-[70px]"></div>
                    <div v-for="i in 4" :key="i" :class="`chart-link link_${i}`"></div>
                  </div>
                </div>
              </div>
            </div>
          </VueDraggable>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeSort"> 关闭 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessageBox, ElMessage } from "element-plus"
import { getInfo, kpiUserCenter, getTargetBoard } from "@/api/login"
import cache from "@/plugins/cache"
import api from "@/api/tableForm.js"
import { VueDraggable } from "vue-draggable-plus"
import useUserStore from "@/store/modules/user"
const userStore = useUserStore()
const router = useRouter()
const onPush = () => {
  router.push("oms/report/performance-indicator")
}
//
import { department } from "@/api/public"
const departmentData = ref([])
const getDepartment = async () => {
  // department

  let data = cache.session.getJSON("department") || ""
  if (data) {
    departmentData.value = data.filter((v) => v.id == 2)
  } else {
    data = await department()
    cache.session.setJSON("department", data)
    departmentData.value = data.filter((v) => v.id == 2)
  }
  // console.log(departmentData.value)
}
const departmentRef = ref()
const queryTypeChange = (e) => {
  sortForm.value.department_id = 2
  departmentRef.value.setCurrentKey(2)
  getSortPerformance()
}
const handleNodeClick = (data) => {
  // console.log(data)
  sortForm.value.department_id = data.id
  getSortPerformance()
}

const defaultProps = {
  children: "sub",
  label: "name",
}

// 指标排序
const sortConfig = ref([])
const sortVisible = ref(false)
const sortPerformance = ref([])
const sortLoading = ref(false)
const sortForm = ref({ department_id: 2, query_type: "all" })
const openSort = () => {
  getDepartment()
  sortVisible.value = true
  getSortPerformance()
}
const getSortPerformance = () => {
  sortLoading.value = true
  kpiUserCenter({ ...sortForm.value }).then((res) => {
    res.data.forEach((item) => {
      item.daysApart = filterDayApart(new Date(), item.end_date)
      item.textColor = "#E50113"
      item.achieving_rate >= 100 && (item.textColor = "#00AC76")
      item.sort = `${item.target_type},${item.indicator_type}${item.target_type == 1 ? "," + item.name : ""}`
    })

    res.data = res.data.sort((a, b) => {
      return sortConfig.value.indexOf(b.sort) - sortConfig.value.indexOf(a.sort)
    })
    sortPerformance.value = res.data
    setTimeout(() => {
      sortPerformance.value.forEach((item, i) => {
        initChart(item, i + "sd")
      })
      sortLoading.value = false
    }, 500)
  })
}

const sortChange = async () => {
  if (sortForm.value.query_type != "all" || (sortForm.value.department_id && sortForm.value.department_id != 2)) {
    return ElMessage.warning("请在左侧选择“信诚创新”后，再进行排序操作！")
  }
  // 删除历史所有数据
  let list = await api.queryParamsIndex({ scope: "main/home/kpi" })
  list.data.forEach((v) => {
    api.queryParamsDelete(`id=${v._id}`)
  })
  let params = sortPerformance.value.map((v) => {
    return `${v.target_type},${v.indicator_type}${v.target_type == 1 ? "," + v.name : ""}`
  })
  await api.queryParamsCreate({ name: "指标排序", scope: "main/home/kpi", params })
  sortConfig.value = params.reverse()
  getSortPerformance()
}
const closeSort = async () => {
  getPerformance()
  sortPerformance.value = []
  nextTick(() => {
    sortVisible.value = false
  })
}
const getSortConfig = () => {
  api.queryParamsIndex({ scope: "main/home/kpi" }).then((res) => {
    sortConfig.value = res.data?.[0]?.params.reverse() || []
  })
}

import appStore from "@/store/modules/app"
const mode = computed(() => appStore().mode)
const userBg = {
  light: "https://xc-goods.oss-cn-shenzhen.aliyuncs.com/20240913/data/Company/%28bg%29%2B0152264565523c88dd347d1b7cc617f632b7efdb7.png",
  dark: "https://xc-goods.oss-cn-shenzhen.aliyuncs.com/20240913/data/Company/%28bg%402x%29%2B014953121206678562f19aa41d561202846df5d0e.png",
  grey: "https://xc-goods.oss-cn-shenzhen.aliyuncs.com/20240913/data/Company/%28bg%402x%202%29%2B01500786152e73c35f43332af93ecd7d41fc02c23.png",
}
const state = reactive({
  departments: [],
  roles: [],
  user: {},
  other: {},
})
const getUser = () => {
  getInfo().then((response) => {
    const { departments, roles, user, ...reset } = response?.data || {}
    state.departments = departments
    state.roles = roles
    state.user = user
    state.other = reset || {}
  })
}

onMounted(() => {
  getSortConfig()
  getUser()
  getPerformance()
  getTargetBoardList()
})
import { isPermission } from "@/utils/permission.js"
// 业绩指标
const performance = ref([])
const getPerformance = () => {
  kpiUserCenter().then((res) => {
    res.data.forEach((item) => {
      item.daysApart = filterDayApart(new Date(), item.end_date)
      item.textColor = "#E50113"
      item.achieving_rate >= 100 && (item.textColor = "#00AC76")
      item.sort = `${item.target_type},${item.indicator_type}${item.target_type == 1 ? "," + item.name : ""}`
    })

    res.data = res.data.sort((a, b) => {
      return sortConfig.value.indexOf(b.sort) - sortConfig.value.indexOf(a.sort)
    })

    performance.value = res.data
    nextTick(() => {
      res.data.forEach((item, i) => {
        initChart(item, i)
      })
    })
    //
  })
}
// 计算相隔天数
function filterDayApart(date1Str, date2Str) {
  // 将日期字符串转换为日期对象
  let date1 = new Date(date1Str)
  let date2 = new Date(date2Str)
  // 计算两个日期之间相隔的毫秒数
  let timeDiff = date2 - date1
  // 将毫秒数转换为天数
  let daysDiff = timeDiff / (1000 * 60 * 60 * 24)
  // 取整数部分以得到完整的天数
  daysDiff = Math.ceil(daysDiff)
  return daysDiff
}
import * as echarts from "echarts"
const initChart = (item, i) => {
  let achieving_rate = item.achieving_rate < 0 ? 0 : item.achieving_rate
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.getElementById(`myChart${i}`))
  // 指定图表的配置项和数据
  let option = {
    series: [
      {
        type: "gauge",
        startAngle: 90,
        endAngle: -270,
        radius: "100%",
        progress: {
          show: true,
          overlap: false,
          // roundCap: true,
          clip: false,
          itemStyle: {
            color: item.textColor,
          },
        },
        // 控制刻度是否显示
        axisTick: { show: false },
        // 控制刻度是否显示
        axisLabel: { show: false },
        // 控制指针是否显示
        pointer: { show: false },
        // 控制分割线是否显示
        splitLine: { show: false },
        // splitNumber: 145, // 设置分割段数，即两层线的数量
        axisLine: {
          // show: false, // 控制轴线是否显示
          color: "red",
          lineStyle: {
            width: 11,
            color: [
              [0.25, "#EBF3FF"],
              [0.5, "#CCE1FF"],
              [0.75, "#AECFFF"],
              [1, "#90BDFF"],
            ],
            // shadowColor: "rgba(0, 0, 0, 0.9)",
            // shadowBlur: 1,
          },
        },
        data: [
          {
            value: achieving_rate,
            detail: {
              color: item.textColor,
              fontSize: 12,
              fontFamily: "AlibabaPuHuiTi_2_85_Medium",
              offsetCenter: ["0%", "0"],
              formatter: (value) => `${item.achieving_rate}{a|%}`,
              rich: {
                a: { color: item.textColor, fontSize: 8 },
              },
            },
          },
        ],
      },
    ],
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}
const emit = defineEmits(["handleEditPwd"])
// 修改密码
const handleEditPwd = () => {
  emit("handleEditPwd")
  //
}
// 退出登陆状态  测试模块
// const cstoken = (val) => {
//   if (val == "架构组") {
//     userStore.islogout()
//   }
// }

// 退出账号
const handleLogout = () => {
  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      userStore
        .logOut()
        .then(() => {
          location.href = "/index"
        })
        .catch((e) => {
          console.warn(e)
        })
    })
    .catch((e) => {
      console.warn(e)
    })
}
const open = () => {
  setTimeout(() => {
    if (performance.value.length) {
      dialogVisible.value = true
      nextTick(() => {
        performance.value.forEach((item, i) => {
          initChart(item, i + "d")
        })
      })
    }
  }, 1000)
}
const dialogVisible = ref(false)

// 业绩指标
const goodTargetList = ref([])
const getTargetBoardList = async () => {
  try {
    const res = await getTargetBoard()
    goodTargetList.value = res.data.map((item) => {
      item.goods_target_config.remaining_days = computedDay(item.goods_target_config.month_end)
      item.textColor = computedColor(item)
      return item
    })
  } catch (e) {
    throw Error(e)
  }
}

// 计算当前距离结束时间剩余天数
const computedDay = (month_end) => {
  const currentDate = new Date()
  const endDate = new Date(month_end)
  endDate.setHours(23, 59, 59, 999)
  const timeDifference = endDate - currentDate
  const dayDifference = Math.ceil(timeDifference / (1000 * 60 * 60 * 24))
  return dayDifference >= 0 ? dayDifference : 0
}

// 计算颜色
const computedColor = (item) => {
  if (item.target_value === item.finish_value) {
    return "#67C23A"
  } else {
    if (item.goods_target_config.remaining_days <= 7) {
      return "#E50113"
    } else if (item.goods_target_config.remaining_days > 7) {
      return "#3487FF"
    }
  }
}

const computePercentage = (item) => {
  return ((item.finish_value / item.target_value) * 100).toFixed(2)
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
.hello-title {
  background: -webkit-linear-gradient(0deg, #7098fe 0%, #3bd6fe 62%, #7098fe 100%); /* Chrome, Safari */
  background: linear-gradient(0deg, #7098fe 0%, #3bd6fe 62%, #7098fe 100%); /* 标准语法 */
  -webkit-background-clip: text; /* Chrome, Safari */
  background-clip: text;
  -webkit-text-fill-color: transparent; /* Chrome, Safari */
  color: transparent; /* 在不支持 -webkit-text-fill-color 的浏览器中，字体颜色设置为透明 */
  display: inline-block;
}

.tenant-name {
  background: -webkit-linear-gradient(90deg, #7098fe 0%, #3bd6fe 62%, #7098fe 100%); /* Chrome, Safari */
  background: linear-gradient(90deg, #7098fe 0%, #3bd6fe 62%, #7098fe 100%); /* 标准语法 */
  -webkit-background-clip: text; /* Chrome, Safari */
  background-clip: text;
  -webkit-text-fill-color: transparent; /* Chrome, Safari */
  color: transparent; /* 在不支持 -webkit-text-fill-color 的浏览器中，字体颜色设置为透明 */
  display: inline-block;
}
.bg-hand {
  width: 78px;
  height: 78px;
  position: absolute;
  // top: 0;
  right: 0;
  bottom: 0;
}
.dark {
  .performance-item {
    background: linear-gradient(180deg, #10294d 0%, #1a1a1a 100%);
  }
}
.grey {
  .performance-item {
    background: linear-gradient(180deg, #cfd7e3 0%, #e0e0e0 100%);
  }
}
.light {
  .performance-item {
    background: linear-gradient(180deg, #eaf3ff 0%, #ffffff 100%);
  }
}
.performance-item {
  width: calc(100% - 16px);
  // height: 146px;
  // height: 178px;
  padding: 16px;
  margin: 8px;
  // background: linear-gradient(180deg, #eaf3ff 0%, #ffffff 100%);
  border-radius: 8px;
  // border: 1px solid #e6e7e9;

  border: 1px solid var(--base-border-color);
}
.index-key {
  position: absolute;
  top: 45%;
  left: 12px;
  color: var(--base-placeholder-text-color);
}

.font-family_65 {
  font-family: "AlibabaPuHuiTi_2_85_Medium";
}
.achieving-rate {
  position: absolute;
  width: 40px;
  text-align: center;
  right: 15px;
}
.chart-link {
  position: absolute;
  width: 12px;
  // background: #fff;
  background: var(--base-color);
  height: 2px;
  z-index: 99;

  &.link_1 {
    transform: rotate(90deg);
    right: 29px;
    top: 4px;
  }
  &.link_1-1 {
    top: 4px;
  }
  &.link_2 {
    top: 32px;
    right: 0;
  }
  &.link_3 {
    transform: rotate(90deg);
    right: 29px;
    bottom: 4px;
  }
  &.link_1-3 {
    bottom: 4px;
  }
  &.link_4 {
    top: 32px;
    left: 0;
  }
}
/* 0123456789,. */
@font-face {
  font-family: "AlibabaPuHuiTi_2_85_Medium";
  font-weight: 900;
  src: url("//at.alicdn.com/wf/webfont/uKIeDEUeDTzy/GEoBl8uSrhxq.woff2") format("woff2"), url("//at.alicdn.com/wf/webfont/uKIeDEUeDTzy/1e0RcpoVOsZG.woff") format("woff");
  font-display: swap;
}

.my-dialog-header {
  height: 100%;
  width: calc(100% + 55px);
  margin-left: -15px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, #badeff 100%);
}

.bg-color {
  background: var(--el-bg-color);
}
.text-color {
  color: var(--base-text-color);
}
.sort-box {
  .left {
    border-right: 1px solid var(--base-border-color);
    margin-right: 16px;
  }
  :deep(.department_tree) {
    width: 100%;
    margin-top: 5px;

    .custom_tree_node {
      display: flex;
      justify-content: space-between;
      vertical-align: middle;
      width: 100%;
      span {
        align-self: center;
      }
      .lable {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .el-tree-node__content {
      padding-right: 10px;
      margin: 6px 0;
    }
  }
}

.goods-target {
  background: linear-gradient(to bottom, #eaf3ff 0%, #ffffff 100%);
  border: 1px solid #e6e7e9;
  padding: 12px;
  margin-right: 12px;
  border-radius: 5px;
  margin: 8px;
  font-size: 14px;
}
.goods-target_module {
  background-color: #e5f6f1;
  color: #00ac76;
  font-size: 14px;
}
</style>
